<template>
  <div class="el-single-select single-select-wrap">
    <el-dialog
      :before-close="handleClose"
      :close-on-click-modal="false"
      :title="supplierData.title"
      :top="sta"
      :visible.sync="visible"
      v-if="visible"
      width="1000px"
    >
      <div class="el-dialog-box">
        <div
          class="dialog-top"
          :style="{ height: getTableHeadOptions.length <= 2 ? '20%' : '30%' }"
        >
          <slot name="dialogTop">
            <div
              class="dialog-input"
              v-for="item in getTableHeadOptions"
              :key="item.prop"
            >
              <span class="label">{{ item.label }}：</span>
              <el-input
                v-if="item.type === 'input'"
                :placeholder="`请输入${item.label}模糊查询`"
                v-model="supplierData.formDate[item.prop]"
                style="width: 260px"
                clearable
              />

              <el-input
                v-if="item.type === 'selectInput'"
                v-model="supplierData.formDate[item.prop]"
                show-overflow-tooltip
                disabled
              >
                <el-button
                  v-if="!supplierData.formDate[item.prop]"
                  slot="append"
                  @click="handleSelectTree(item.prop)"
                  >选择</el-button
                >
                <el-button
                  v-else
                  slot="append"
                  @click="handleRemoveTree(item.prop)"
                  >清除</el-button
                >
              </el-input>
            </div>
            <div style="width: 100%; display: flex; justify-content: center">
              <el-button
                size="mini"
                type="primary-font-mini"
                @click="singleSelectSearch"
                >搜索
              </el-button>
              <el-button size="mini" type="default-mini" @click="handleReset"
                >重置
              </el-button>
            </div>
          </slot>
        </div>
        <div class="dialog-bottom">
          <el-table
            :data="supplierData.tableData"
            @select="dialogCheck"
            @select-all="dialogCheck"
            @selection-change="dialogCheckChange"
            ref="multipleTable"
            tooltip-effect="dark"
            minHeight="150"
            :height="getTableHeadOptions.length <= 2 ? '115%' : '100%'"
            v-if="visible"
          >
            <el-table-column label="序号" type="index" width="55" />
            <el-table-column
              show-overflow-tooltip
              v-for="(i, m) in supplierData.tableHeadOptions"
              :key="m"
              :label="i.label"
              :prop="i.prop"
              :min-width="i.width"
            />
            <el-table-column label="操作" width="100">
              <template slot-scope="{ row, $index }">
                <el-button
                  class="row-btn"
                  plain
                  type="single-number"
                  @click="checkDetail($index, row)"
                  >选择</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="dialog-footer" slot="footer">
        <div id="ccui-paging">
          <el-pagination
            :current-page="pageNoCode"
            :page-size="supplierData.formDate.pageSize"
            :pager-count="5"
            :pageSizes="pageSizes"
            :total="supplierData.recordsTotal"
            @addCurrentPage="internalCurrentPage"
            @current-change="handleCurrentChange"
            @next-click="handleNext"
            @prev-click="handlePrev"
            @size-change="handleSizeChange"
            background
            layout="total, sizes, prev, pager, next, jumper"
            next-text="下一页 >"
            popper-class="ccui-paging-page-size-popper"
            prev-text="< 上一页"
          ></el-pagination>
        </div>
      </div>
    </el-dialog>

    <staffSelector
      ref="staffSelector"
      btnText="选择"
      selectedTitle="已选择单位"
      title="请选择单位"
      mode="radio"
      :showBtnTest="false"
      :requestTreeFunction="getQryTree"
      :requestSeachFunction="queryMemberGroup"
      @selectedStaffSuccess="selectStaffSelector"
    />
  </div>
</template>

<script>
import staffSelector from "./staffSelector";
import { queryMemberGroup, getQryTree } from "@/basa/api";
export default {
  name: "singleSupplier",
  props: {
    supplierData: {
      type: Object,
      default: () => {}
    }
  },
  components: {
    staffSelector
  },
  data() {
    return {
      data: [],
      pageSizeCode: 10,
      pageNoCode: 0,
      present: "",
      radio: "",
      input: {
        inputMc: "",
        inputJc: "",
        inputSj: ""
      },
      sta: "5vh",
      objs: [],
      inputs: {},
      selectioned: [],
      multipleSelection: [],
      restaurants: [],
      timeout: null,
      isShow: true,
      isShows: true,
      visible: false,
      tempFormNode: "",
      pageSizes: [10, 20, 50, 100, 500]
    };
  },
  computed: {
    getTableHeadOptions() {
      return this.supplierData.tableHeadOptions.filter(n => n.showSearch);
    }
  },
  methods: {
    close() {
      this.visible = false;
      this.$emit("close", false);
    },
    confirm() {
      this.visible = false;
      this.$emit("update:visible", false);
      this.$emit("selectPartyB", {
        confirmSelect: this.multipleSelection,
        status: "confirm"
      });
    },
    handlePrev() {},
    handleNext() {},
    checkDetail(index, row) {
      this.multipleSelection = row;
      this.inputs = row;

      this.confirm();
    },
    internalCurrentPage(val) {
      val = 10;
      console.log(`当前22页: ${val}`);
    },
    handleSizeChange(val) {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      this.$emit("handleSizeChange", val);
      console.log(`每页 ${val} 条`);
      this.supplierData.formDate.pageSize = val;
      this.$emit("selectPartyB", { pageSize: val, status: "pageSize" });
    },
    handleCurrentChange(val) {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      this.$emit("handleCurrentChange", val);
      console.log(`当前页: ${val}`);
      this.supplierData.formDate.pageNo = val;
      this.$emit("selectPartyB", { pageNo: val, status: "pageNo" });
    },
    dialogCheck: function (selection, row) {
      this.$refs.multipleTable.clearSelection();
      if (selection.length === 0) {
        // 判断selection是否有值存在
        return;
      }
      if (row) {
        this.selectioned = row;
        this.$refs.multipleTable.toggleRowSelection(row, true);
      }
    },
    dialogCheckChange(row) {
      this.multipleSelection = row;
      if (row.length === 0) {
        this.selectioned = null;
      }
      if (row[row.length - 1] !== undefined) {
        this.objs = row[row.length - 1];
      }
    },
    add() {
      let a = this.$el.getElementsByClassName("el-radio__label");
      for (let i = 0; i < a.length; i++) {
        a[i].innerText = "选择";
        a[i].setAttribute("class", "el-radio__label");
      }
      console.log("1111", this.input);
      this.$emit("addInput", this.input);
    },
    reset() {
      this.input.inputMc = "";
      this.input.inputJc = "";
      this.input.inputSj = "";
      this.inputs = {};
      this.data = [];
    },
    handleSelect(item) {
      this.data = item;
    },
    myDetermine() {
      this.input.inputMc = "";
      this.input.inputJc = "";
      this.input.inputSj = "";
      this.inputs = {};
      this.data = [];
      // this.$refs.multipleTable.clearSelection();
      this.visible = false;
      // this.$emit("update:dialogVisible", false);
    },
    myCancel() {
      if (JSON.stringify(this.inputs) !== "{}") {
        this.data = [];
        this.input.inputMc = "";
        this.input.inputJc = "";
        this.input.inputSj = "";
        // this.$refs.multipleTable.clearSelection();
        this.visible = false;
        // this.$emit("update:dialogVisible", false);
        this.$emit("listenTochildEvent", this.inputs);
        this.isShows = false;
        this.isShow = true;
        this.inputs = {};
      } else {
        this.$emit("listenTochildEvent", this.inputs);
      }
    },
    handleClose() {
      this.visible = false;
      this.$emit("selectPartyB", { status: "closeReset" });
    },
    handleCheckChange(data, checked, node) {
      this.data = data;
    },
    //搜索
    singleSelectSearch() {
      this.$emit("selectPartyB", {
        formDate: this.supplierData.formDate,
        status: "search"
      });
    },
    //重置
    handleReset() {
      this.$emit("selectPartyB", { status: "reset" });
    },
    selectStaffSelector([data], orgTypes, orginName, node) {
      this.supplierData.formDate[this.tempFormNode] = data.name;

      this.$forceUpdate();
    },
    handleSelectTree(val) {
      this.tempFormNode = val;
      this.$refs.staffSelector.isShow = true;
    },
    handleRemoveTree(val) {
      this.supplierData.formDate[this.tempFormNode] = "";

      this.$forceUpdate();
    },

    queryMemberGroup,
    getQryTree
  }
};
</script>

<style lang="scss" scoped>
.chooseSettle {
  display: inline-block;
}
.single-select-wrap /deep/ .el-dialog__wrapper .el-dialog .el-dialog__body {
  .el-dialog-box .dialog-top {
    .dialog-input .el-input {
      width: 260px;
    }
    // .input-readonly.el-input {
    //   input {
    //     background-color: rgb(229, 229, 229);
    //   }
    // }
    .el-input-group--append {
      .el-button {
        background: #f7f9ff;
        border: 1px solid #0089ef;
        &:hover {
          background-color: #fff;
          border-color: #5576cf;
          color: #fff;
        }
        span {
          color: #0089ef;
          font-size: 13px;
          font-weight: 500;
        }
      }
    }
  }
}
.single-select-wrap {
  /deep/ .el-dialog {
    height: 85% !important;
    min-height: 570px;
    .el-dialog__footer {
      padding: 0 30px !important;
    }
    .el-dialog__body {
      height: 70vh !important;
      min-height: 450px;
      overflow: inherit !important;
      .el-dialog-box {
        height: 100% !important;
        overflow: inherit !important;
        .dialog-top {
          height: 30%;
        }
        .dialog-bottom {
          height: 66%;
        }
      }
    }
  }
}
.single-select-wrap .el-dialog__wrapper .el-dialog .el-dialog__body {
  height: 70vh !important;
}
.row-btn {
  width: auto !important;
  padding: 0 20px !important;
  margin-left: 0 !important;
}
/deep/.label {
  display: inline-block;
  width: 130px !important;
  text-align: right;
}
/deep/ .el-dialog__footer {
  border-top: none;
}
</style>
